<template>
  <div class="common-error-wrap">
    <div class="error-image-wrap">
      <img :src="imageList[type]" alt="" class="error-image-style" />
    </div>
    <div class="error-info-wrap">
      <div
        class="error-message-wrap"
        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
      >
        {{
          message
            ? message
            : messageList[type]
            ? messageList[type]
            : "未知异常!"
        }}
      </div>
      <div
        class="error-describe-wrap"
        v-if="describe || messageList[type]"
        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
      >
        {{ describe || describeList[type] }}
      </div>
      <div class="error-tools-wrap" v-if="home || back || load || $slots.tools">
        <el-button v-if="home" type="primary" @click="goHome"
          >返回首页</el-button
        >
        <el-button v-if="back" @click="goBack">返回上一页</el-button>
        <el-button v-if="load" type="text" @click="reload">重新加载</el-button>
        <slot name="tools"></slot>
      </div>
    </div>
  </div>
</template>

<script>
const error = require("./assest/error.png");
export default {
  name: "CommonError",
  props: {
    type: {
      type: String,
      default: "error",
    },
    message: {
      type: String,
      default: "",
    },
    describe: {
      type: String,
      default: "",
    },
    home: {
      type: Boolean,
      default: false,
    },
    back: {
      type: Boolean,
      default: false,
    },
    load: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      imageList: {
        error: error,
        failed: error,
        empty: error,
        unauthorized: error,
      },
      messageList: {
        error: "未知异常!",
        failed: "数据加载失败!",
        empty: "空数据!",
        unauthorized: "暂无权限!",
      },
      describeList: {
        error: "请联系管理员!",
        failed: "请确认数据无误后重试!",
        empty: "没有获取到数据!",
        unauthorized: "请联系管理员!",
      },
    };
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    goBack() {
      this.$router.go(-1);
    },
    reload() {
      this.$emit("reload");
    },
  },
};
</script>

<style scoped lang="scss">
.common-error-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .error-image-wrap {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .error-info-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    margin-left: 8px;

    .error-message-wrap {
      font-size: 18px;
    }

    .error-describe-wrap {
      color: #606266;
      margin: 12px 0;
      font-size: 14px;
    }

    .error-tools-wrap {
    }
  }
}
</style>
